<template>
    <svg
        version="1.1"
        id="图层_1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        x="0px"
        y="0px"
        width="526px"
        height="512px"
        viewBox="0 0 526 512"
        enable-background="new 0 0 526 512"
        xml:space="preserve"
    >
        <defs>
            <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #cbdfe5">
                    <animate
                        attributeName="stop-color"
                        values="#cbdfe5;#cbdfe5;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#cbdfe5;#cbdfe5;"
                        dur="6s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="1%" style="stop-color: #78a2ff">
                    <animate
                        attributeName="offset"
                        values="-0.1;-0.1;-0.1;-0.1;2.0;-0.1;-0.1;2.0;-0.1;-0.1;2.0;2.0;2.0;2.0;2.0"
                        dur="6s"
                        repeatCount="indefinite"
                    />
                    <animate
                        attributeName="stop-color"
                        values="#cbdfe5;#cbdfe5;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#4fe9ed;#cbdfe5;#cbdfe5;"
                        dur="6s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="200%" style="stop-color: #4fe9ed">
                    <animate
                        attributeName="stop-color"
                        values="#cbdfe5;#cbdfe5;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#cbdfe5;#cbdfe5;"
                        dur="6s"
                        repeatCount="indefinite"
                    />
                </stop>
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #cbdfe5">
                    <animate
                        id="o2"
                        begin="9s;o2.end"
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#4fe9ed;#4fe9ed;#4fe9ed;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="1%" style="stop-color: #78a2ff">
                    <animate
                        begin="9s;o2.end"
                        attributeName="offset"
                        values="0.0;0.0;0.0;-0.1;2.0;2.0;-0.1;2.0;2.0;-0.1;2.0;2.0;2.0;2.0;2.0;2.0;2.0;0.0;0.0;0.0;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                    <animate
                        begin="0.9;o2.end"
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#4fe9ed;#4fe9ed;#4fe9ed;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="200%" style="stop-color: #4fe9ed">
                    <animate
                        begin="9s;o2.end"
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#4fe9ed;#4fe9ed;#4fe9ed;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
            </linearGradient>

            <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color: #cbdfe5">
                    <animate
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="1%" style="stop-color: #78a2ff">
                    <animate
                        attributeName="offset"
                        values="0.0;0.0;0.0;0.1;2.0;2.0;0.1;2.0;2.0;0.1;2.0;2.0;2.0;2.0;2.0;2.0;2.0"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                    <animate
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#4fe9ed;#78a2ff;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
                <stop offset="200%" style="stop-color: #4fe9ed">
                    <animate
                        attributeName="stop-color"
                        values="#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#4fe9ed;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;#CBDFE5;"
                        dur="9s"
                        repeatCount="indefinite"
                    />
                </stop>
            </linearGradient>
        </defs>

        <g>
            <path :fill="index == 0 ? 'url(#gradient)' : '#cbdfe5'" d="M182.122,229.331l0.005,2.756l-62.293,35.963l-0.006-2.761L182.122,229.331z" />
            <path :fill="index == 1 ? 'url(#gradient)' : '#cbdfe5'" d="M182.139,235.634l0.005,2.756l-44.916,25.93l-0.011-2.756L182.139,235.634z" />
            <path :fill="index == 2 ? 'url(#gradient)' : '#cbdfe5'" d="M182.155,241.937l0.011,2.756l-36.952,21.333l-0.006-2.762L182.155,241.937z" />
        </g>
    </svg>
</template>

<script>
export default {
    data() {
        return {
            index: 0
        };
    },
    created() {
        this.play();
    },

    methods: {
        play() {
            setTimeout(() => {
                if (this.index == 2) {
                    this.index = 0;
                } else {
                    this.index++;
                }

                this.play();
            }, 6000);
        }
    }
};
</script>

<style></style>
